<template>
    <view style="width: 100%; height: 100%;padding: 20rpx;background: #efefef;">
        <view style="background: #fff;border-radius:8rpx;display: flex;flex-direction: column;padding: 0 20rpx;">
            <view
                style="font-size: 32rpx;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;">
                采购订单号:&nbsp;&nbsp;{{ materialList.orderNo }}</view>
            <view style="font-size: 32rpx;color: #333333">供应商名称:&nbsp;&nbsp;{{ materialList.supplier }}</view>
            <view
                style="font-size: 32rpx;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;">
                合同编号:&nbsp;{{ materialList.contractCode }}</view>
            <view
                style="font-size: 32rpx;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;">
                供应商编码:&nbsp;&nbsp;{{ materialList.supplierCode }}</view>
            <view style="display: flex;">
                <view style="font-size: 32rpx;color: #333333;width: 278rpx;">数量:&nbsp;&nbsp;{{ materialList.amount }}</view>
                <view style="margin: auto;font-size: 32rpx;color: #333333;">合价(不含税):&nbsp;&nbsp;{{
                    materialList.equipSum }}
                </view>
                <view></view>
            </view>
            <view style="display: flex;">
                <view style="font-size: 32rpx;color: #333333;width: 200rpx;">计量单位:&nbsp;&nbsp;{{ materialList.unit }}</view>
                <view style="margin: auto;font-size: 32rpx;color: #333333;">总税额:&nbsp;&nbsp;{{
                    materialList.taxAmount }}
                </view>
                <view></view>
            </view>
            <view style="display: flex;">
                <view style="font-size: 32rpx;color: #333333;width: 246rpx;">税率:&nbsp;&nbsp;{{ materialList.taxRate }}</view>
                <view style="margin: auto;font-size: 32rpx;color: #333333">含税总价:&nbsp;&nbsp;{{ materialList.amt }}
                </view>
                <view></view>
            </view>
        </view>
        <view style="background: #fff;border-radius:8rpx;margin: 12rpx 0;padding: 40rpx 0;">
            <view
                style="display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;padding: 0 20rpx;">
                <view class="add-border" style="border: 1px solid #ccc;border-bottom: none;font-weight: bold;">增调数量
                </view>
                <view class="add-border"
                    style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;font-weight: bold;">
                    入库</view>
                <view class="add-border"
                    style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;font-weight: bold;">不入库</view>
                <view class="add-border" style="border: 1px solid #ccc;border-bottom: none;color: transparent;">增调数量
                </view>
                <view class="add-border">
                    <view class="children-border" style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;">可用
                    </view>
                    <view class="children-border" style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;">不可用
                    </view>
                </view>
                <view class="add-border">
                    <view class="children-border" style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;">可用
                    </view>
                    <view class="children-border" style="border-top: 1px solid #ccc;border-right: 1px solid #ccc;">不可用
                    </view>
                </view>
                <view class="add-border" style="border: 1px solid #ccc;border-top: none;min-height: 62.4rpx;">{{
                    materialList.changeNum
                }}</view>
                <view class="add-border">
                    <view class="children-border" style="border: 1px solid #ccc;border-left: none;min-height: 62.4rpx;">
                        {{
                            materialList.usableStorage }}</view>
                    <view class="children-border" style="border: 1px solid #ccc;border-left: none;min-height: 62.4rpx;">
                        {{
                            materialList.unUsableStorage }}</view>
                </view>
                <view class="add-border">
                    <view class="children-border" style="border: 1px solid #ccc;border-left: none;min-height: 62.4rpx;">
                        {{
                            materialList.notUsableStorage }}</view>
                    <view class="children-border" style="border: 1px solid #ccc;border-left: none;min-height: 62.4rpx;">
                        {{
                            materialList.notUnusableStorage }}</view>
                </view>
            </view>
        </view>
        <view style="background: #fff;border-radius:8rpx;margin: 12rpx 0;padding: 40rpx 0;">
            <view
                style="display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;padding: 0 20rpx;">
                <view class="two-border" style="font-weight: bold;width: 28.6%;border-right: none;border-bottom: none;">保管人</view>
                <view class="two-border" style="font-weight: bold;width: 38%;border-right: none;border-bottom: none;">保管人联系方式</view>
                <view class="two-border" style="font-weight: bold;border-bottom: none;">实物保管地址</view>
                <view class="two-border"
                    style="min-height:240rpx;width: 28.6%;display: flex;align-items: center;justify-content: center;border-right: none;">{{
                        materialList.storeManName }}
                </view>
                <view class="two-border"
                    style="min-height: 240rpx;width: 38%;display: flex;align-items: center;justify-content: center;border-right: none;">{{
                        materialList.storeManNum }}</view>
                <view class="two-border"
                    style="min-height: 240rpx;overflow: hidden;display: flex;align-items: center;justify-content: center;">
                    {{ materialList.storageAddress }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "MaterialDetail",
    data() {
        return {
            materialList: {},
            prjId: ''
        }
    },
    methods: {
    },
    onLoad(option) {
        this.prjId = JSON.parse(decodeURIComponent(option.prjId))
        this.getId()
    },
    methods: {
        async getId() {
            const { data } = await this.$axios.post(`/settlement/api/settle_project/queryAdjustInfo?prjId=${this.prjId}`)
            await this.getMaterialList(data.adjId)
        },
        async getMaterialList(adjId) {
            const { data } = await this.$axios.get(`/settlement/api/material_adjust/getMaterialAdjustInfo?adjustId=${adjId}`)
            this.materialList = data[0]
        },
    }

}

</script>
<style>
@import "@/common/common-ui.css";
</style>
<style>
@import "@/common/uView.css";
</style>
<style scoped lang="scss">
.add-border {
    width: 33.3%;
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    color: #333333;
}

.children-border {
    width: 50%;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
}

.two-border {
    border: 2rpx solid #dedede;
    width: 33.3%;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
}
</style>